<template>
  <div>
    <el-card>
      <div>
        <el-button type="primary" @click="dialogVisible=true">修改进度</el-button>
      </div>
    </el-card>
    <el-card>
      <div>
        <el-row>
          <el-col :span="3">任务标题：</el-col>
          <el-col :span="21">{{work.item}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">任务简述：</el-col>
          <el-col :span="21">{{work.content}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">更新时间：</el-col>
          <el-col :span="9">{{work.update_time}}</el-col>
          <el-col :span="3">创建时间：</el-col>
          <el-col :span="9">{{work.start_time}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">任务状态：</el-col>
          <el-col :span="9">{{work.state}}</el-col>
          <el-col :span="3">负责人：</el-col>
          <el-col :span="9">{{work.username}}</el-col>
        </el-row>
      </div>
    </el-card>
    <el-card>
      <div v-for="content in work.contents" :key="content.id">
        <template v-if="content.leixing == 1">
          <el-row>
            <el-col :span="12">{{content.name}}</el-col>
            <el-col :span="12">
              <el-progress :percentage="content.complete"></el-progress>
            </el-col>
          </el-row>
        </template>
      </div>
      <div v-for="content in work.contents" :key="content.id">
        <template v-if="content.leixing == 2">
          <el-row>
            <el-col :span="12">{{content.name}}</el-col>
            <el-col :span="12">
              <el-progress :percentage="content.complete"></el-progress>
            </el-col>
          </el-row>
        </template>
      </div>
    </el-card>
    <el-card>
      <el-table :data="work.logs" :default-sort="{prop:'create_time', order: 'descending'}">
        <el-table-column label="日志编号" prop="id"></el-table-column>
        <el-table-column label="日志内容" prop="log"></el-table-column>
        <el-table-column label="发生时间" prop="create_time" sortable></el-table-column>
      </el-table>
    </el-card>
    <el-card>
      <el-button type="primary" @click="addFileVisible = true">关联文档</el-button>
      <li v-for="file in work.files" :key="file.id">
        <a :href="file.url">{{file.title}}</a>
      </li>
    </el-card>
    <el-dialog title="修改任务进度" :visible.sync="dialogVisible">
      <el-form :model="work" label-width="180px">
        <el-form-item label="项目状态">
          <el-radio-group v-model="work.state">
            <el-radio-button label="未开展"></el-radio-button>
            <el-radio-button label="进行中"></el-radio-button>
            <el-radio-button label="已完成"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <template v-for="content in work.contents">
          <el-form-item :key="content.id" :label="content.name" v-if="content.leixing == 1">
            <el-radio-group v-model="content.complete">
              <el-radio-button label="0"></el-radio-button>
              <el-radio-button label="25"></el-radio-button>
              <el-radio-button label="50"></el-radio-button>
              <el-radio-button label="75"></el-radio-button>
              <el-radio-button label="100"></el-radio-button>
            </el-radio-group>
          </el-form-item>
        </template>
        <template v-for="content in work.contents">
          <el-form-item :key="content.id" :label="content.name" v-if="content.leixing == 2">
            <el-radio-group v-model="content.complete">
              <el-radio-button label="0"></el-radio-button>
              <el-radio-button label="25"></el-radio-button>
              <el-radio-button label="50"></el-radio-button>
              <el-radio-button label="75"></el-radio-button>
              <el-radio-button label="100"></el-radio-button>
            </el-radio-group>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button type="primary" @click="submitUpdate()">提交</el-button>
          <el-button type="primary" @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="关联文件" :visible.sync="addFileVisible">
      <el-form :model="newfile" label-width="80px">
        <el-form-item label="文件名称">
          <el-input v-model="newfile.title" placeholder="请输入文件名称"></el-input>
        </el-form-item>
        <el-form-item label="文件url">
          <el-input v-model="newfile.url" placeholder="请输入文件OA网址或知识管理平台分享网址"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitNewFile()">提交</el-button>
          <el-button type="primary" @click="addFileVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getprojectinfos,
  postprojectinfos,
  getinfosbyid,
  postinfosbyid
} from "@/api/table";

export default {
  data() {
    return {
      needFresh: false,
      projectName: null,
      workid: null,
      dialogVisible: false,
      addFileVisible: false,
      work: {},
      newfile: {
        title: null,
      }
    };
  },
  watch: {
    needFresh: function() {
      this.getwork();
      this.needFresh = false;
    }
  },
  created() {
    this.workid = this.$route.params.id;
    this.getwork();
  },
  methods: {
    getwork() {
      getinfosbyid("work", this.workid).then(response => {
        this.work = response.data;
      });
    },
    submitUpdate() {
      postinfosbyid("work", this.workid, this.work).then(response => {
        if (response.data.success === 1) {
          this.$message({
            message: "提交成功",
            type: "success"
          });
        }
        this.needFresh = true;
        this.dialogVisible = false;
      });
    },
    submitNewFile(){
      postinfosbyid('newfile', this.workid, this.newfile).then(response => {
        if (response.data.success === 1) {
          this.$message({
            message: "提交成功",
            type: "success"
          });
        }
        this.needFresh = true;
        this.addFileVisible = false;
      });
    }
  }
};
</script>

